<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>检测数据改变的原理</title>
    <script type="text/javascript" src="../../js/vue.js"></script>

</head>
<body>

    <div id="root">
        <button @click="student.age++">年龄+1</button>
        <button @click="addSex">点击添加性别</button>
        <button @click="student.sex = '未知'">点击修改性别</button>

        <button @click="addHobby">点击添加爱好到首位</button>
        <button @click="updateHobby">修改第一个爱好为 哈哈哈</button>
        <button @click="deleteHobby">删除爱好 哈哈哈</button>

        <hr>
        
        <h5>姓名：{{student.name}}</h5>
        <h5 v-if = "student.sex">性别：{{student.sex}}</h5>
        <h5>年龄：{{student.age}}</h5>
        <h5>爱好</h5>
        <ul>
            <li v-for = "(h,index) in student.hobby" :key = "index">
                {{h}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
         Vue.config.performance = false;
        const vm = new Vue({
            el:'#root',
            data:{
                name:'hndx',
                addr:'hn',
                student:{
                    age:18,
                    hobby:['听歌','看电影','散步'],
                },
                
            },
            methods:{
                addSex(){
                    //Vue.set(this.student,'sex','男')
                    this.$set(this.student, 'sex', '男')
                },
                addHobby(){
                    this.student.hobby.unshift('爱好')
                },
                updateHobby(){
                    //this.$set(this.student.hobby, 0, '哈哈哈')
                    this.student.hobby.splice(0, 1,'哈哈哈')
                },
                deleteHobby(){
                    this.student.hobby = this.student.hobby.filter((h)=>{
                        return h != '哈哈哈'
                    })
                },
            }
        })

   </script>
    
</body>
</html>